<template>
  <div class="top-title">
    <div class="one-title">
      <img class="bt-svg" src="http://mcgamehome.love/img2/1ad7635251cc60e8846b269c3218698d9c0321ad.png">
      <span  class="title-one span-def">猜你喜欢</span>
    </div>
    <div class="button">
      <button type="button" class="titleButton">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
          <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
          <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
        </svg>
        <span class="marl5 span-def">换一换</span>
      </button>
    </div>
  </div>
  <div class="like">
    <div class="div-waike">
      <div class="up-list p-r">
        <template  v-for="(item, index) in list.items.slice(0,listNum)" :key="item.id">
          <div class="up-list-def-w box-active" v-show="index < listNum" :class="{playerBox:item.id === isYes}"  @mouseleave="yichu(index,item.id,1)" @mouseenter="yiru(index,item.id,1)">
            <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.id,index:1}}">
            <div class="up-list-one p-r " >
              <img class="imgC" :src="item.vImgL"  :alt="item.vImgL">
              <div class="player-all-box  p-a" :class="{noneBox:isNone === item.id}">
                <div class="video-player-box bor-t-l-r p-r">
                  <!--                  <my-video :src="item.tvUrl" :type="item.tvType" ref="videoMy"></my-video>-->
                </div>
                <div class="tip p-a">
                  <span class="tip-span">{{item.vSType.split(',')[0]}}</span>
                  <span class="tip-span">{{item.vSType.split(',')[1]}}</span>
                  <template v-if="item.vindex">
                    <span class="tip-span">全{{item.vSType.split(',')[2]}}话</span>
                  </template>
                  <template v-if="!item.vindex">
                    <span class="tip-span">更新至{{item.vSType.split(',')[2]}}话</span>
                  </template>
                </div>
                <div class="go-player-box p-a">
                  <div class="go-box">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white"></path></svg>
                  </div>
                  <div class="link-one">
                    <svg width="20" height="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.7012 2.2056C16.3764 1.08408 14.9557 0.49014 13.5124 0.500124C12.2642 0.508758 11.0773 0.968592 9.99888 1.80057C8.91 0.967692 7.70489 0.525487 6.45236 0.525498C5.00637 0.52551 3.58737 1.11472 2.29877 2.2056C0.858947 3.4245 0.231588 5.3246 0.250411 7.2015C0.269277 9.08271 0.934385 11.051 2.22373 12.4956C4.5884 15.1452 7.39076 17.303 8.74689 18.2861C9.49751 18.8302 10.5024 18.8307 11.2538 18.2885C11.8033 17.892 12.5838 17.3076 13.4724 16.5797C13.7928 16.3172 13.8398 15.8447 13.5773 15.5242C13.3148 15.2038 12.8423 15.1568 12.5219 15.4193C11.6613 16.1243 10.9057 16.6899 10.376 17.0722C10.1492 17.2358 9.85326 17.2354 9.62729 17.0716C8.30489 16.113 5.6024 14.0286 3.34284 11.4968C2.32409 10.3554 1.76602 8.75006 1.75034 7.18646C1.73461 5.61856 2.26134 4.20261 3.26795 3.35045C4.34581 2.43798 5.43282 2.02551 6.45238 2.0255C7.46816 2.02549 8.50699 2.43469 9.49557 3.33301C9.7816 3.59292 10.2183 3.59293 10.5043 3.33302C11.5011 2.42732 12.5229 2.007 13.5228 2.00009C14.525 1.99316 15.6103 2.40088 16.732 3.35045C17.7736 4.23224 18.3006 5.71209 18.2462 7.33685C18.2324 7.75083 18.5567 8.09766 18.9707 8.11151C19.3847 8.12536 19.7315 7.80098 19.7454 7.387C19.8103 5.44702 19.1893 3.4654 17.7012 2.2056ZM16 7.75C16 7.33579 15.6642 7 15.25 7C14.8358 7 14.5 7.33579 14.5 7.75V10.0015H12.25C11.8358 10.0015 11.5 10.3373 11.5 10.7515C11.5 11.1657 11.8358 11.5015 12.25 11.5015H14.5V13.75C14.5 14.1642 14.8358 14.5 15.25 14.5C15.6642 14.5 16 14.1642 16 13.75V
            11.5015H18.25C18.6642 11.5015 19 11.1657 19 10.7515C19 10.3373 18.6642 10.0015 18.25 10.0015H16V7.75Z" fill="white"></path></svg>
                  </div>
                </div>
                <div class="background-cover"></div>
              </div>
            </div>
            <div class="span-out-hid z-10">
              <span class="span-def">{{item.vName}}</span>
            </div>
            <div class="spanSm">
              <span >{{item.vTitleTip}}</span>
            </div>
            </router-link>
          </div>
        </template>
        <!--  -->

      </div>
    </div>
  </div>
  <div class="like">
    <div class="div-waike">
      <div class="up-list p-r">
        <template  v-for="(item, index) in list.items.slice(listNum,listNum2)" :key="item.id">
          <div class="up-list-def-w box-active" v-show="index < listNum" :class="{playerBox:item.id === isYes}"  @mouseleave="yichu(index,item.id,2)" @mouseenter="yiru(index,item.id,2)">
            <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.id,index:1}}">
            <div class="up-list-one p-r " >
              <img class="imgC" :src="item.vImgL"  :alt="item.vImgL">
              <div class="player-all-box  p-a" :class="{noneBox:isNone === item.id}">
                <div class="video-player-box bor-t-l-r p-r">
                  <!--                  <my-video :src="item.tvUrl" :type="item.tvType" ref="videoMy"></my-video>-->
                </div>
                <div class="tip p-a">
                  <span class="tip-span">{{item.vSType.split(',')[0]}}</span>
                  <span class="tip-span">{{item.vSType.split(',')[1]}}</span>
                  <template v-if="item.vindex">
                    <span class="tip-span">全{{item.vSType.split(',')[2]}}话</span>
                  </template>
                  <template v-if="!item.vindex">
                    <span class="tip-span">更新至{{item.vSType.split(',')[2]}}话</span>
                  </template>
                </div>
                <div class="go-player-box p-a">
                  <div class="go-box">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white"></path></svg>
                  </div>
                  <div class="link-one">
                    <svg width="20" height="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.7012 2.2056C16.3764 1.08408 14.9557 0.49014 13.5124 0.500124C12.2642 0.508758 11.0773 0.968592 9.99888 1.80057C8.91 0.967692 7.70489 0.525487 6.45236 0.525498C5.00637 0.52551 3.58737 1.11472 2.29877 2.2056C0.858947 3.4245 0.231588 5.3246 0.250411 7.2015C0.269277 9.08271 0.934385 11.051 2.22373 12.4956C4.5884 15.1452 7.39076 17.303 8.74689 18.2861C9.49751 18.8302 10.5024 18.8307 11.2538 18.2885C11.8033 17.892 12.5838 17.3076 13.4724 16.5797C13.7928 16.3172 13.8398 15.8447 13.5773 15.5242C13.3148 15.2038 12.8423 15.1568 12.5219 15.4193C11.6613 16.1243 10.9057 16.6899 10.376 17.0722C10.1492 17.2358 9.85326 17.2354 9.62729 17.0716C8.30489 16.113 5.6024 14.0286 3.34284 11.4968C2.32409 10.3554 1.76602 8.75006 1.75034 7.18646C1.73461 5.61856 2.26134 4.20261 3.26795 3.35045C4.34581 2.43798 5.43282 2.02551 6.45238 2.0255C7.46816 2.02549 8.50699 2.43469 9.49557 3.33301C9.7816 3.59292 10.2183 3.59293 10.5043 3.33302C11.5011 2.42732 12.5229 2.007 13.5228 2.00009C14.525 1.99316 15.6103 2.40088 16.732 3.35045C17.7736 4.23224 18.3006 5.71209 18.2462 7.33685C18.2324 7.75083 18.5567 8.09766 18.9707 8.11151C19.3847 8.12536 19.7315 7.80098 19.7454 7.387C19.8103 5.44702 19.1893 3.4654 17.7012 2.2056ZM16 7.75C16 7.33579 15.6642 7 15.25 7C14.8358 7 14.5 7.33579 14.5 7.75V10.0015H12.25C11.8358 10.0015 11.5 10.3373 11.5 10.7515C11.5 11.1657 11.8358 11.5015 12.25 11.5015H14.5V13.75C14.5 14.1642 14.8358 14.5 15.25 14.5C15.6642 14.5 16 14.1642 16 13.75V
            11.5015H18.25C18.6642 11.5015 19 11.1657 19 10.7515C19 10.3373 18.6642 10.0015 18.25 10.0015H16V7.75Z" fill="white"></path></svg>
                  </div>
                </div>
                <div class="background-cover"></div>
              </div>
            </div>
            <div class="span-out-hid z-10">
              <span class="span-def">{{item.vName}}</span>
            </div>
            <div class="spanSm">
              <span >{{item.vTitleTip}}</span>
            </div>
            </router-link>
          </div>
        </template>
        <!--  -->

      </div>
    </div>
  </div>
  <div class="like">
    <div class="div-waike">
      <div class="up-list p-r">
        <template  v-for="(item, index) in list.items.slice(listNum2,listNum3)" :key="item.id">
          <div class="up-list-def-w box-active" v-show="index < listNum" :class="{playerBox:item.id === isYes}"  @mouseleave="yichu(index,item.id,3)" @mouseenter="yiru(index,item.id,3)">
            <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.id,index:1}}">
            <div class="up-list-one p-r " >
              <img class="imgC" :src="item.vImgL"  :alt="item.vImgL">
              <div class="player-all-box  p-a" :class="{noneBox:isNone === item.id}">
                <div class="video-player-box bor-t-l-r p-r">
                  <!--                  <my-video :src="item.tvUrl" :type="item.tvType" ref="videoMy"></my-video>-->
                </div>
                <div class="tip p-a">
                  <span class="tip-span">{{item.vSType.split(',')[0]}}</span>
                  <span class="tip-span">{{item.vSType.split(',')[1]}}</span>
                  <template v-if="item.vindex">
                    <span class="tip-span">全{{item.vSType.split(',')[2]}}话</span>
                  </template>
                  <template v-if="!item.vindex">
                    <span class="tip-span">更新至{{item.vSType.split(',')[2]}}话</span>
                  </template>
                </div>
                <div class="go-player-box p-a">
                  <div class="go-box">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white"></path></svg>
                  </div>
                  <div class="link-one">
                    <svg width="20" height="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.7012 2.2056C16.3764 1.08408 14.9557 0.49014 13.5124 0.500124C12.2642 0.508758 11.0773 0.968592 9.99888 1.80057C8.91 0.967692 7.70489 0.525487 6.45236 0.525498C5.00637 0.52551 3.58737 1.11472 2.29877 2.2056C0.858947 3.4245 0.231588 5.3246 0.250411 7.2015C0.269277 9.08271 0.934385 11.051 2.22373 12.4956C4.5884 15.1452 7.39076 17.303 8.74689 18.2861C9.49751 18.8302 10.5024 18.8307 11.2538 18.2885C11.8033 17.892 12.5838 17.3076 13.4724 16.5797C13.7928 16.3172 13.8398 15.8447 13.5773 15.5242C13.3148 15.2038 12.8423 15.1568 12.5219 15.4193C11.6613 16.1243 10.9057 16.6899 10.376 17.0722C10.1492 17.2358 9.85326 17.2354 9.62729 17.0716C8.30489 16.113 5.6024 14.0286 3.34284 11.4968C2.32409 10.3554 1.76602 8.75006 1.75034 7.18646C1.73461 5.61856 2.26134 4.20261 3.26795 3.35045C4.34581 2.43798 5.43282 2.02551 6.45238 2.0255C7.46816 2.02549 8.50699 2.43469 9.49557 3.33301C9.7816 3.59292 10.2183 3.59293 10.5043 3.33302C11.5011 2.42732 12.5229 2.007 13.5228 2.00009C14.525 1.99316 15.6103 2.40088 16.732 3.35045C17.7736 4.23224 18.3006 5.71209 18.2462 7.33685C18.2324 7.75083 18.5567 8.09766 18.9707 8.11151C19.3847 8.12536 19.7315 7.80098 19.7454 7.387C19.8103 5.44702 19.1893 3.4654 17.7012 2.2056ZM16 7.75C16 7.33579 15.6642 7 15.25 7C14.8358 7 14.5 7.33579 14.5 7.75V10.0015H12.25C11.8358 10.0015 11.5 10.3373 11.5 10.7515C11.5 11.1657 11.8358 11.5015 12.25 11.5015H14.5V13.75C14.5 14.1642 14.8358 14.5 15.25 14.5C15.6642 14.5 16 14.1642 16 13.75V
            11.5015H18.25C18.6642 11.5015 19 11.1657 19 10.7515C19 10.3373 18.6642 10.0015 18.25 10.0015H16V7.75Z" fill="white"></path></svg>
                  </div>
                </div>
                <div class="background-cover"></div>
              </div>
            </div>
            <div class="span-out-hid z-10">
              <span class="span-def">{{item.vName}}</span>
            </div>
            <div class="spanSm">
              <span >{{item.vTitleTip}}</span>
            </div>
            </router-link>
          </div>
        </template>
        <!--  -->

      </div>
    </div>
  </div>
  <div class="like">
    <div class="div-waike">
      <div class="up-list p-r">
        <template  v-for="(item, index) in list.items.slice(listNum3,listNum4)" :key="item.id">
          <div class="up-list-def-w box-active" v-show="index < listNum" :class="{playerBox:item.id === isYes}"  @mouseleave="yichu(index,item.id,4)" @mouseenter="yiru(index,item.id,4)">
            <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.id,index:1}}">
            <div class="up-list-one p-r " >
              <img class="imgC" :src="item.vImgL" :alt="item.vImgL">
              <div class="player-all-box  p-a" :class="{noneBox:isNone === item.id}">
                <div class="video-player-box bor-t-l-r p-r">
                  <!--                  <my-video :src="item.tvUrl" :type="item.tvType" ref="videoMy"></my-video>-->
                </div>
                <div class="tip p-a">
                  <span class="tip-span">{{item.vSType.split(',')[0]}}</span>
                  <span class="tip-span">{{item.vSType.split(',')[1]}}</span>
                  <template v-if="item.vindex">
                    <span class="tip-span">全{{item.vSType.split(',')[2]}}话</span>
                  </template>
                  <template v-if="!item.vindex">
                    <span class="tip-span">更新至{{item.vSType.split(',')[2]}}话</span>
                  </template>
                </div>
                <div class="go-player-box p-a">
                  <div class="go-box">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white"></path></svg>
                  </div>
                  <div class="link-one">
                    <svg width="20" height="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.7012 2.2056C16.3764 1.08408 14.9557 0.49014 13.5124 0.500124C12.2642 0.508758 11.0773 0.968592 9.99888 1.80057C8.91 0.967692 7.70489 0.525487 6.45236 0.525498C5.00637 0.52551 3.58737 1.11472 2.29877 2.2056C0.858947 3.4245 0.231588 5.3246 0.250411 7.2015C0.269277 9.08271 0.934385 11.051 2.22373 12.4956C4.5884 15.1452 7.39076 17.303 8.74689 18.2861C9.49751 18.8302 10.5024 18.8307 11.2538 18.2885C11.8033 17.892 12.5838 17.3076 13.4724 16.5797C13.7928 16.3172 13.8398 15.8447 13.5773 15.5242C13.3148 15.2038 12.8423 15.1568 12.5219 15.4193C11.6613 16.1243 10.9057 16.6899 10.376 17.0722C10.1492 17.2358 9.85326 17.2354 9.62729 17.0716C8.30489 16.113 5.6024 14.0286 3.34284 11.4968C2.32409 10.3554 1.76602 8.75006 1.75034 7.18646C1.73461 5.61856 2.26134 4.20261 3.26795 3.35045C4.34581 2.43798 5.43282 2.02551 6.45238 2.0255C7.46816 2.02549 8.50699 2.43469 9.49557 3.33301C9.7816 3.59292 10.2183 3.59293 10.5043 3.33302C11.5011 2.42732 12.5229 2.007 13.5228 2.00009C14.525 1.99316 15.6103 2.40088 16.732 3.35045C17.7736 4.23224 18.3006 5.71209 18.2462 7.33685C18.2324 7.75083 18.5567 8.09766 18.9707 8.11151C19.3847 8.12536 19.7315 7.80098 19.7454 7.387C19.8103 5.44702 19.1893 3.4654 17.7012 2.2056ZM16 7.75C16 7.33579 15.6642 7 15.25 7C14.8358 7 14.5 7.33579 14.5 7.75V10.0015H12.25C11.8358 10.0015 11.5 10.3373 11.5 10.7515C11.5 11.1657 11.8358 11.5015 12.25 11.5015H14.5V13.75C14.5 14.1642 14.8358 14.5 15.25 14.5C15.6642 14.5 16 14.1642 16 13.75V
            11.5015H18.25C18.6642 11.5015 19 11.1657 19 10.7515C19 10.3373 18.6642 10.0015 18.25 10.0015H16V7.75Z" fill="white"></path></svg>
                  </div>
                </div>
                <div class="background-cover"></div>
              </div>
            </div>
            <div class="span-out-hid z-10">
              <span class="span-def">{{item.vName}}</span>
            </div>
            <div class="spanSm">
              <span >{{item.vTitleTip}}</span>
            </div>
            </router-link>
          </div>
        </template>
        <!--  -->

      </div>
    </div>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
import API from "@/api/AxiosConfig";

const list = reactive({
  items: [],
  // showImg:[]
  upList: []
  // itemAll: [],
  // upListAll: []
})
// const imgBox = document.getElementsByClassName("imgC")
// let imgBoxList = [document.getElementsByClassName("imgC")]
const HotListAll = document.getElementsByClassName("up-list")
const isYes = ref(null)
const isNone = ref(null)
const listNum = ref(7)
const listNum2 = ref(14)
const listNum3 = ref(21)
const listNum4 = ref(28)
let lTimer = null
const videoMy = ref(null)
onMounted(() => {
  API({ url: '/api/homeDoLike', method: 'get' }).then(res => {
    list.items = res.data
    // console.log(res.data)
  }).catch(err => {
    // console.log(err)
  })
  setTimeout(() =>{
    reSize()
  },250)
  window.addEventListener('resize',reSize)
    reSize()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize',reSize)

})

async function reSize() {
  if (document.body.clientWidth>1399 && document.documentElement.clientWidth>1399){
    listNum.value = 7
    listNum2.value = 14
    listNum3.value = 21
    listNum4.value = 28
  }else {
    listNum.value = 6
    listNum2.value = 12
    listNum3.value = 18
    listNum4.value = 24
  }
setHeight()
}
 function setHeight(){
  const imgBox = document.getElementsByClassName("imgC")
  for (let i = 0; i < imgBox.length; i++) {
    imgBox[i].style = 'height:'+(imgBox[0].offsetWidth*1.35)+'px'
  }
}
function yiru(c,index,num) {
  clearTimeout(lTimer)
  lTimer = setTimeout(() =>{
    if (c < listNum.value - 1) {
      // console.log('if进来了' + c)
      HotListAll[num].style = 'justify-content: flex-start;'
    } else {
      HotListAll[num].style = 'justify-content: flex-end;'
    }
    isYes.value = index
    isNone.value = index
  },250)
}
function yichu(c,index,i) {
  clearTimeout(lTimer)

  // videoMy.value.pause
  isYes.value = null
  isNone.value = !index
}
</script>

<style lang="less" scoped>
a{
  text-decoration: none;
}
.marl5{
  margin-left: 5px;
}
.button{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.titleButton{
  border: 1px solid #E3E5E7;
  height: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  border-radius: 4px;
  background-color: #fff;
  color: #424242;
}
.titleButton:hover{
  background-color: #E3E5E7;
  color: hotpink;
}
.bt-svg{
  width: 35px;
}
.top-title{
  display: flex;
  position: relative;
  justify-content: space-between;
}
.tv-waike{
  display: flex;
  position: relative;
}
.one-title{
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.title-one{
  font-size: 25px;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.spanSm{
  font-family: "黑体";
  font-weight: 550;
  font-size: 12px;
  color: gray;
  height: 17px;
  line-height: 17px;
}
.like{
  width: 100%;
  display: flex;
  margin-bottom: 25px;
}
.bor-t-l-r{
  border-radius: 8px;
  overflow: hidden;
}
.z-10{
  z-index: 10;
}
.span-out-hid{
  width: 100%;
  font-size: 16px;
  color: #18191c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 5px 0 2px 0;
}
.player-all-box{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
}
.video-player-box{
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
  flex: 1;
}
.video-player-box>video{
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  content-visibility: visible;
  object-fit: cover;
}
.div-waike{
  //-webkit-box-flex: 0;
  //width: calc(83.33% - 3.33px);
  //flex: 0 0 calc(83.33% - 3.33px);
  overflow: hidden;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.p-r{
  position: relative;
}
.p-a{
  position: absolute;
}
.tv-waike{
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
}
.up-list-all{
  width: 100%;
  display: flex;
  //justify-content: center;
  margin-bottom: 25px;
}
.up-list{
  //width: 100%;
  display: flex;
  margin: 10px 0;
}

.up-list-one{
  width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}
.up-list-one>img{
  display: flex;
  border-radius: 8px;
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.weekdayGreen{
  border-radius: 10px;
  padding: 2px 10px;
  position: absolute;
  font-family: "黑体";
  font-weight: bold;
  top: -12px;
  background: rgb(205, 239, 215);
  color: rgb(0, 173, 52)
}
.tv-show-box{
  margin: 25px 0;
  width: 85%;
  max-width: 1790px;
  z-index: 5;
}
.tv-waike{
  display: flex;
  justify-content: center;
}
.show-tv-one{
  display: flex;
  width: 60%;
  /* background-color: cornflowerblue; */
  border-radius: 8px;
  z-index: 5;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.xq-tv-one{
  display: flex;
  justify-content: flex-end;
  left: 5%;
  width: 95%;
  height: 100%;
  top: 25px;
  border-radius: 8px;
  background: rgb(243, 59, 46);
}
.xq-list-one{
  width: 38.5%;
  display: flex;
  flex-direction: column;
  padding: 15px 30px;
  justify-content: flex-end;
  z-index: 2;
}
.pf-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.pf-one{
  display: flex;
  align-items: center;
}
.dp-box{
  margin-left: 15px;
}
.video-de{
  width: 100%;
  height: 100%;
  object-fit: fill
}
.nr-body{
  padding: 10px 0 20px 0;
}
.tv-go{
  display: flex;
  flex-direction: row;
}
.tv-go-one{
  width: 50px;
  height: 50px;
  background-color: hsla(0,0%,100%,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin-right: 25px;
  border: none;
}
.next-slt-box{
  overflow-x: auto;
  display: flex;
  padding: 15px 0 35px 0;
}
.tv-slt-one{
  min-width: 145px;
  border-radius: 8px;
  border: 4px solid hsla(0,0%,100%,.2);
  margin: 5px;
}
.tv-slt-one>img{
  border-radius: 8px;
}
.back-img{
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .15;
  z-index: -1;
}
.background-cover{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  height: 73px;
  z-index: 2;
  background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.00386607) 8.07%,rgba(0,0,0,.0152486) 15.54%,
  rgba(0,0,0,.033824) 22.5%,rgba(0,0,0,.0592687) 29.04%,rgba(0,0,0,.0912593) 35.26%,rgba(0,0,0,.129472) 41.25%,
  rgba(0,0,0,.173583) 47.1%,rgba(0,0,0,.22327) 52.9%,rgba(0,0,0,.278208) 58.75%,rgba(0,0,0,.338074) 64.74%,
  rgba(0,0,0,.402545) 70.96%,rgba(0,0,0,.471296) 77.5%,rgba(0,0,0,.544005) 84.46%,rgba(0,0,0,.620347) 91.93%,rgba(0,0,0,.7));

}
.tip{
  bottom: 15px;
  left: 8px;
  z-index: 4;
}

.tip-span{
  font-size: 12px;
  font-weight: bold;
  font-family: 黑体;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: white;
  margin: 0 5px;
  -ms-user-select: none;
  user-select: none;
}
.go-player-box{
  display: flex;
  flex-direction: row;
  bottom: 15px;
  right: 10px;
  z-index: 6;
}
.go-box{
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(134, 62, 234);
}
.link-one{
  margin-left: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #00000099;
}
.box-active{
  -webkit-transition: -webkit-box-flex .5s;
  transition: -webkit-box-flex .5s;
  -o-transition: flex .5s;
  transition: flex .5s;
  transition: flex .5s,-webkit-box-flex .5s,-ms-flex .5s;
}
.noneBox{
  display: block;
}
.up-list-def-w{
  transition: flex .3s,-webkit-box-flex .3s,-ms-flex .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 5px;

}

@media screen and (min-width: 2061px){
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.3%;
    flex: 0 0 14.3%;
    width: 14.3%;
  }
  .div-waike,.top-title {
    width: 1784px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.3%;
    flex: 0 0 14.3%;
    width: 14.3%;
  }
  .div-waike {
    width: 100%;
    margin: 0 136px;
  }
  .top-title{
    margin: 0 136px;
  }
}
@media screen and (min-width: 1400px) and (max-width: 1559.8px) {
  .up-list-def-w {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.3%;
    flex: 0 0 14.3%;
    width: 14.3%;
  }
  .div-waike,.top-title {
    margin: 0 60px 0 60px;
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 calc(30% - 12px);
  }
}
.playerBox {
  -webkit-box-flex: 0;
  flex: 0 0 calc(30% - 25px);
}
@media screen and (min-width: 1301px) and (max-width: 1399.8px) {
  .div-waike,.top-title {
    width: 1180px;
    margin: 0 auto;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.7%;
    flex: 0 0 16.7%;
    width: 16.7%;
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 33%;
    width: 33%;
  }
}
@media screen and (min-width: 1140px) and (max-width: 1300.8px) {
  .div-waike,.top-title {
    margin: 0 60px;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66%;
    flex: 0 0 16.66%;
    width: 16.66%;
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}
@media screen and (max-width: 1139.8px) {
  .div-waike,.top-title {
    min-width: 1020px;
    width: 1020px;
    max-width: 1020px;
    margin: 0 auto;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.7%;
    flex: 0 0 16.7%;
    width: 16.7%;
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}
</style>
